<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>工作负荷</title>
    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <div th:replace="common :: #leftmenu"></div>

    <!-- main content start-->
    <div class="main-content" style="padding-top: 90px;">
        <div class="header-section">
            <div class="form-horizontal">
                <div class="form-group" style="margin-top: 10px;margin-bottom: 0px;padding-top: 10px;">
                    <label class="control-label col-md-4">年度份</label>
                    <div class="col-md-2 col-xs-2">
                        <div data-date-minviewmode="years" data-date-viewmode="years"
                             data-date="2021"
                             data-date-format="yyyy"
                             class="input-append date dpYears">
                            <input type="text" readonly size="16" id="yearSelected"
                                   class="form-control">
                            <span class="input-group-btn add-on">
                                <button class="btn btn-primary" type="button"><i
                                        class="fa fa-calendar"></i></button>
                            </span>
                        </div>
                        <span class="help-block">请选择年度份</span>
                    </div>

                    <button class="btn btn-primary" style="margin-left: 20px;"
                            th:onclick="getYearData()">查询
                    </button>
                </div>
            </div>

        </div>
        <!--body wrapper start-->
        <div class="wrapper">

            <div th:class="row">
                <div class="col-sm-6">
                    <section class="panel">
                        <header class="panel-heading">
                            工作负荷 - 年度度人次
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">


                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">年度门诊人次  </span>
                                            <h3 id="outYearPatients"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">年度住院患者入院例数</span>
                                            <h3 id="inYearPatients"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">年度住院患者出院例数</span>
                                            <h3 id="dischargeYearPatients"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">门诊与出院人次比 </span><i class="fa fa-question-circle" title="年度门诊人次 ：年度住院患者出院例数"></i>
                                            <h3 id="outInPatientProportion"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </section>
                </div>
                <div class="col-sm-6">
                    <section class="panel">
                        <header class="panel-heading">
                            工作负荷 - 床位
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">

                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-6 p-states">
                                            <span class="state-title">年度实际开放总床日数  </span><i class="fa fa-question-circle" title="数据来源于病区日志"></i>
                                            <h3 id="totalOpenBedDays"></h3>
                                        </div>
                                        <div class="col-sm-6 p-states">
                                            <span class="state-title">年度实际占用总床日数  </span><i class="fa fa-question-circle" title="数据来源于病区日志"></i>
                                            <h3 id="totalUseBedDays"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-6 p-states">
                                            <span class="state-title">出院患者实际占用总床日  </span><i class="fa fa-question-circle" title="出院患者住院日总和"></i>
                                            <h3 id="totalBedDays"></h3>
                                        </div>
                                        <div class="col-sm-6 p-states">
                                            <span class="state-title">出院患者平均住院日  </span><i class="fa fa-question-circle" title="出院患者住院日总和 / 出院患者总人数"></i>
                                            <h3 id="averageHospitalDays"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">平均每张床位工作日  </span>
                                            <i class="fa fa-question-circle" title="实际占用总床日数 / (实际开放总床日数 / 床位开放天数) 其中2020年度以上线时间08月25日为起始时间"></i>
                                            <h3 id="daysPerBed"></h3>
                                        </div>
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">床位使用率  </span><i class="fa fa-question-circle"
                                                                                       title="实际占用总床日数 / 实际开放总总床日数"></i>
                                            <h3 id="bedUseRate"></h3>
                                        </div>
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">病床周转次数  </span><i class="fa fa-question-circle" title="出院总人数 / （实际开放总床日数 / 床位开放天数） 其中2020年度以上线时间08月25日为起始时间"></i>
                                            <h3 id="bedUseCount"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </section>
                </div>
            </div>

        </div>
        <!--body wrapper end-->
    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>

<script type="text/javascript">


    function getYearData() {
        let yearSelected = $('#yearSelected').val();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getYearData",
            data: {"year": yearSelected},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    $('#outYearPatients').text(result.outYearPatients);
                    $('#inYearPatients').text(result.inYearPatients);
                    $('#dischargeYearPatients').text(result.dischargeYearPatients);

                    if (result.dischargeYearPatients == 0){
                        $('#outInPatientProportion').text('——');
                    }else   {
                        $('#outInPatientProportion').text((result.outYearPatients / result.dischargeYearPatients).toFixed(2) + ' : 1');
                    }

                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("请求数据失败!" + JSON.parse(errorMsg));
            }
        });//end ajax

        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getYearBedData",
            data: {"year": yearSelected},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    $('#totalOpenBedDays').text(result.totalOpenBedDays);
                    $('#totalUseBedDays').text(result.totalUseBedDays);
                    $('#totalBedDays').text(result.totalBedDays);

                    $('#averageHospitalDays').text(result.averageHospitalDays);
                    $('#daysPerBed').text(result.daysPerBed);
                    $('#bedUseRate').text(toPercent(result.bedUseRate));
                    $('#bedUseCount').text(result.bedUseCount);
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("请求数据失败!" + JSON.parse(errorMsg));
            }
        });//end ajax
    }


    $(document).ready(function () {
        $('#yearSelected').val(new Date().getFullYear());
        getYearData();

    });//刷新方法结束

</script>
</body>